@extends("backend.layout.main")

@section("before.css")
    <link type="text/css" href="/backend/css/common.css" rel="Stylesheet">
    <link type="text/css" href="/backend/css/header.css" rel="Stylesheet">

    <link type="text/css" href="/backend/css/style2.css" rel="Stylesheet">
    <link type="text/css" href="/backend/css/style3.css" rel="Stylesheet">
    <link type="text/css" href="/backend/css/project.css" rel="Stylesheet">


    <link type="text/css" href="/backend/css/animate.min.css" rel="Stylesheet">
    <script src="/backend/js/laydate.js"></script>



    <script type="text/javascript">
        !function(){
            laydate({elem: '#demo'});//绑定元素
        }();
        $(function(){
            $('.perMesg').mouseenter(function(){
                $(this).find('dd').addClass('showTrsm');
            }).mouseleave(function(){
                $(this).find('dd').removeClass('showTrsm');
            })
            if($(this).width()<1345){
                $('.project-list-a').css('width','100%');
            }else if($(this).width()>1346){
                $('.project-list-a').css('width','48%');
            }

            $(window).resize(function(){
                if($(this).width()<1345){
                    $('.project-list-a').css('width','100%');
                }else if($(this).width()>1346){
                    $('.project-list-a').css('width','48%');
                }
            })

        });


    </script>
@endsection

@section("right_content")
    <div class="mainWrapBox" style="min-width: 700px">
        <div class="mainBox">
            <div class="filter-panel" style="height:auto">
                <div class="xm- xm-sort" style="margin-top:15px" data-sort="ASC">
                    <div class="sort-stime" >开始时间</div><div class="sort-asc"></div>
                </div>
                <div class="xm- xm-sort" style="margin-top:15px">
                    <div class="sort-etime">截止时间</div><div class="sort-asc"></div>
                </div>
                <div class="xm- xm-place" style="margin-top:15px">

                    <select id="area" data-type="area" style="height:30px;border-radius:5px">
                        <option value="">项目地区</option>
                        <option value="云南">云南</option>
                        <option value="湖南">湖南</option>
                        <option value="北京">北京</option>
                    </select>
                </div>
                <div class="xm- xm-stage" style="margin-top:15px">

                    <select  id="stage" data-type="stage" style="height:30px;border-radius:5px">
                        <option value="">项目阶段</option>
                        <option value="1">初步</option>
                        <option value="2">扩初</option>
                        <option value="3">施工图</option>
                    </select>
                </div>
                <div class="xm- xm-state" style="margin-top:15px">

                    <select id="status" data-type="status" style="height:30px;border-radius:5px">
                        <option value="">项目状态</option>
                        <option value="1">正常</option>
                        <option value="2">已完成</option>
                    </select>
                </div>
                <div class="xm- xm-time" style="margin-top:15px">
                    时间范围：
                    <input type="text" id="startDate" name="startDate"  class="inputStyle w90" placeholder="请选择时间" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                    ~
                    <input type="text" id="endDate" name="endDate"  class="inputStyle w90" placeholder="请选择时间" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss',choose:function(datas){search();}})">
                </div>

                <div class="xm- xm-area" style="margin-top:15px">
                    面积范围：
                    <input type="text" id="Minarea" class="inputStyle w100" placeholder="请输入面积">
                    ~
                    <input type="text" id="Maxarea" class="inputStyle w100" placeholder="请输入面积" onBlur="search();">平米
                </div>
                <div class="filter-cell-search left" style="margin-left: 30px">
                    <!---->
                    <div class="search_divs">
                        <input class="input"  style="width: 200px;" placeholder="搜索" id="keyword">
                        <input type="button" class="icon-search" id="searchButton" onclick="search();" >
                    </div>
                    <!---->
                </div>
                <div class="cl"></div>
            </div>

            <div class="body-bg">
                <div id="project-all">
                    @foreach($arr as $k=>$v)
                    <div class="project-list-a" data-item="{{ $v['item_info']['id'] }}">
                        <div class="project-list-content">

                            <h1>{{ $v['item_info']['item_name'] }}</h1>

                            {{--add 2016-9-14 chen--}}
                            <div class="project-ml">
                                <div class="project-ml-i">
                                    <div>花园顾问：<span>{{ $v['item_info']['shan_username'] }}</span></div>
                                    <div>设计师：<span>{{ $v['item_info']['she_username'] }}</span></div>
                                </div>
                                <div class="project-ml-i">
                                    <div>客户类型：<span>111</span></div>
                                    <div>立项时间：<span>{{ $v['item_info']['item_starttime'] }}</span></div>
                                </div>
                                <div class="project-ml-i">
                                    <div>基地面积：<span>{{ $v['item_info']['area'] }}平方米</span></div>
                                    <div>项目预算：<span>{{ $v['item_info']['item_design'] }}元</span></div>
                                </div>
                                <div class="project-ml-i">
                                    <div>项目日志：<span>111</span></div>
                                </div>
                            </div>
                            {{-- end --}}

                            <div class="project-table">
                                @foreach($v['task_info'] as $i=>$y)
                                    <div data-item="{{ $v['item_info']['id'] }}" data-task="{{ $y['id'] }}" data-status="{{ $y['task_status'] }}" class="pro_{{ $y['task_id']}} project-model
				 @if($y['task_starttime']+3600*$y['task_deadline']-time()>0&&$y['task_status']==10||$y['task_status']>=20&&$y['task_status']<30&&strtotime($y['updated_at'])+3600*6-time()>0)
                                            normal
                                     @elseif($y['task_starttime']+3600*$y['task_deadline']-time()<0&&$y['task_status']==10||strtotime($y['updated_at'])+3600*6-time()<0&&$y['task_status']>=20&&$y['task_status']<30)
                                            unusual
                                             @elseif($y['task_status']==31)
                                            unusual2
                                             @elseif($y['task_status']==30)
                                            normal2
                                            @elseif($y['task_status']=="-10")
                                            hese
                                   @endif">

                                        <span class="project-pname">@if($y['task_status']==20){{ $y['checkName'] }}@elseif($y['task_status']>20&&$y['task_status']<30){{ $v['item_info']['shan_username'] }} @elseif($y['task_status']==10||$y['task_status']==0)  @if($y['taskName']){{$y['taskName']}}@else &nbsp; @endif  @elseif($y['task_status']<0)    &nbsp; @elseif($y['task_status']>=30)  {{$y['taskName']}}    @endif</span>

                    <span class="project-type
					@if($y['task_status']==20)
                            zhuan-shen
                    @elseif($y['task_status']==21)
                            shang-shen
                    @elseif($y['task_status']==22)
                            ke-shen
                        @endif
                            "></span>

                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                        @endforeach

                        <div class="modal" id="check-type" style="display:none;width:520px;">
                            <div class="modal-content">
                                <div class="modal-header" style="padding: 4px;">
                                    <span class="modal-title"><em style="font-weight: bold">项目名称</em> </span>
                                </div>
                                <div class="task-content clearfix task-detail">

                                    <div class="task-doc mt10 line-break line-height30 clearfix">
                                        <div class="title" style="line-height:30px">
                                            项目文档
                                        </div>
                                        <div>
                                            <table width="100%">
                                                <tbody id="upload_text">


                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="task-activity2  mt10 line-break line-height30 clearfix">
                                        <div class="title" style="line-height:30px">
                                            <div class="title-text title">项目记录</div>
                                            <div class="title-text title">反馈意见</div>
                                        </div>
                                        <table width="530px">
                                            <tbody id="logs">



                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                </div>
                <div class="pagination">
                    {!! $itemInfo->appends($appends)->links() !!}
                    <input type="hidden" id="page" name="page">
                </div>
            </div>


        </div>
    </div>
    <script src="/backend/js/jquery.hDialog.min.js"></script>

    <script>

        function openchecktype(obj) {

            $(obj).hDialog({
                box: '#check-type',
                width:550,
                height:200,
                positions: 'center',

                modalHide: true,
                closeBg: '#fff',
                beforeShow:function(){

                }
            });
        }
        openchecktype('.normal,.normal2,.unusual,.unusual2');
        $(function(){
            $('.normal,.normal2,.unusual,.unusual2').click(function(){

                var name=$(this).children().eq(0).text();
                //alert(name);
                var item_id=$(this).data('item');
                var task_id=$(this).data('task');
                var status=$(this).data('status');
                var _Token="{{ csrf_token() }}";

                var d = new Date(),
                        str = '';
                        str += d.getFullYear()+'-';
                        str  += d.getMonth() + 1+'-';
                        str  += d.getDate()+' ';
                        str += d.getHours()+':';
                        str  += d.getMinutes()+':';
                        str+= d.getSeconds();

                $.post('/backend/work/accessory',{item_id:item_id,task_id:task_id,_Token:_Token,tag:1},function(data){
                    var data=data;
                    var task_name=data.name;
                    var accessorys=data.accessorys;
                    var logs=data.logs;
                    var is_timeout=data.is_timeout;
                    $('.task-title span').text(task_name);
                    var html="";
                    var ht="";

                    $.each(accessorys,function(i,item){
                        if(item){
                            html += "<tr><td width='50%'>"+item.path.replace(',','')+"</td> <td width='30%'>"+item.created_at.date.substring(0,item.created_at.date.indexOf('.'))+"</td><td width='10%'><a href='/backend/uploads/"+item.item_id+"/"+item.item_task_id+"/"+item.path.replace(',','')+"'>下载</a></td> </tr>";
                        }
                    });
                    $('#upload_text').empty();
                    $('#upload_text').append(html);
                    $.each(logs,function(i,item){
                        var c="";
                        if(item.is_overtime==1){
                            c="unusual2";
                        }
                        ht += "<tr class='"+c+"'><td width='50px'>"+item.author+"</td><td width='220px'><span>"+item.created_at+"</span>"+item.action+"</td><td width='260px'>"+item.comment+"</td></tr>";
                    });
                    $('#logs').empty();
                    $('#logs').append(ht);
                    if(status==10&&!is_timeout){
                        $('#logs').append("<tr><td width='50px'>"+name+"</td><td width='200px'><span>"+str+"</span>正在设计</td><td width='280px'></td></tr>");
                    }else if(status==10&&is_timeout){
                        $('#logs').append("<tr class='unusual2'><td width='50px'>"+name+"</td><td width='200px'><span>"+str+"</span>正在设计</td><td width='280px'></td></tr>");
                    }else if(status>=20&&status<30&&!is_timeout){
                        $('#logs').append("<tr><td width='50px'>"+name+"</td><td width='200px'><span>"+str+"</span>正在审核</td><td width='280px'></td></tr>");
                    }else if(status>=20&&status<30&&is_timeout){
                        $('#logs').append("<tr class='unusual2'><td width='50px'>"+name+"</td><td width='200px'><span>"+str+"</span>正在审核</td><td width='280px'></td></tr>");
                    }
                    $('.modal-title').text(task_name);
                },'json')


            })
        })

        $('.xm-area input:first').blur(function(){
            if(!(/^\d+(.\d{1,2})?$/.test($(this).val())||$(this).val()=='')){
                $(this).val('').addClass('invalid').attr('placeholder','面积输入有误');
            }else if(($(this).next().val()!='')&&(parseFloat( $(this).val())>parseFloat($(this).next().val())   )){
                $(this).val('').addClass('invalid').attr('placeholder','输入小于'+$(this).next().val()+'的数');
            }

        })

        $('.xm-area input:last').blur(function(){
            if(!(/^\d+(.\d{1,2})?$/.test($(this).val())||$(this).val()=='')){
                $(this).val('').addClass('invalid').attr('placeholder','面积输入有误');
            }else if(($(this).prev().val()!='')&&(parseFloat( $(this).val())<parseFloat($(this).prev().val())  )){
                $(this).val('').addClass('invalid').attr('placeholder','输入大于'+$(this).prev().val()+'的数');
            }

        })

        $('.xm-sort').click(function(){
            if($(this).children().eq(1).attr('class')=="sort-asc"){
                $(this).children().eq(1).attr('class','sort-desc');
                $(this).attr('data-sort','DESC');
                search();
            }else{
                $(this).children().eq(1).attr('class','sort-asc');
                $(this).attr('data-sort','ASC');
                search();
            }
        })


        //搜索
      $(function(){
          var area="{{ $appends['area'] or ''}}";
          var stage="{{ $appends['stage'] or ''}}";
          var status="{{ $appends['status'] or ''}}";
          var startDate="{{ $appends['startDate'] or ''}}";
          var endDate="{{ $appends['endDate'] or ''}}";
          var Minarea="{{ $appends['Minarea'] or ''}}";
          var Maxarea="{{ $appends['Maxarea'] or ''}}";
          var keyword="{{ $appends['keyword'] or ''}}";
          var sort="{{ $appends['sort'] or ''}}";


              $("#area").val(area);
              $("#stage").val(stage);
              $("#status").val(status);
              $("#startDate").val(startDate);
              $("#endDate").val(endDate);
              $("#Minarea").val(Minarea);
              $("#Maxarea").val(Maxarea);
              $("#keyword").val(keyword);
         // alert(sort);
          if(sort=="ASC"){
              $('.xm-sort').children().eq(1).attr('class','sort-asc');
          }else if(sort=="DESC") {
              $('.xm-sort').children().eq(1).attr('class','sort-desc');
          }else {
              $('.xm-sort').children().eq(1).attr('class','sort-asc');
          }


      })

        function search(){
            var area=$('#area').val();
            var stage=$('#stage').val();
            var status=$('#status').val();
            var startDate=$('#startDate').val();
            var endDate=$('#endDate').val();
            var Minarea=$('#Minarea').val();
            var Maxarea=$('#Maxarea').val();
            var keyword=$('#keyword').val();
            var sort=$('.xm-sort').data('sort');

            var url='/backend/itemsNew?';

            if(keyword){
                keyword="keyword="+keyword+"&";
            }
            if(sort){
                sort="sort="+sort+"&";
            }
            if(Minarea){
                Minarea="Minarea="+Minarea+"&";
            }
            if(Maxarea){
                Maxarea="Maxarea="+Maxarea+"&";
            }
            if(startDate){
                startDate="startDate="+startDate+"&";
            }
            if(endDate){
                endDate="endDate="+endDate+"&";
            }
            if(area){
                area="area="+area+"&";
            }
            if(stage){
                stage="stage="+stage+"&";
            }
            if(status){
                status="status="+status+"&";
            }
            url=url+area+stage+status+startDate+endDate+Minarea+Maxarea+keyword+sort;
            url= url.substring(0, url.lastIndexOf('&'));
            location.href=url;
        }

        $('.filter-panel select').change(function(){
            search();

        })


    </script>



@endsection